<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试LoccalStorage</title>
</head>
<body>
    <!--原生js实现对localStorage的增删查操作 localStorage中的数据何时会被触发删除 1.手动调用api清除，2清除浏览器缓存-->
    <div>
        <button onclick="addData()">点击向localStorage中增加数据</button><br/>
        <button onclick="deleteData()">点击删除localStorage的数据</button><br/>
        <button onclick="searchData()">点击查询中localStorage的数据</button><br/>
        <button onclick="removeAllData()">点击清空localStorage中的数据</button>
    </div>
    <script type="text/javascript">
        function addData(){
            localStorage.setItem("key1","hello world vue")
            var person ={
                "name":"zhangsan","age":23,"sex":"man"
            }

            console.log(person.toString());
            
            //如果直接塞对象会自动调用toSting(),转化为 	[object Object] 所以在存储一个对象时，避免让它去调用toString
            localStorage.setItem("key2",person)
            localStorage.setItem("person",JSON.stringify(person))
        }

        function deleteData(){
            localStorage.removeItem("key2")
        }

        function searchData(){
            console.log(localStorage.getItem("key1"))
            console.log(localStorage.getItem("person"))
            
        }

        function removeAllData(){
            localStorage.clear()
        }

    </script>
    
</body>
</html>